<!doctype html>
<html lang="zh-cmn-Hans">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no" />
    <meta name="renderer" content="webkit" />
    <meta name="force-rendering" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title></title>
    <!-- MDUI CSS -->
    <link rel="stylesheet" href="https://unpkg.com/mdui@1.0.2/dist/css/mdui.min.css" />
</head>

<body class="mdui-theme-layout-auto mdui-theme-primary-indigo mdui-theme-accent-pink">

    <div class="mdui-fab-wrapper" mdui-fab="{trigger: 'hover'}">
        <button class="mdui-fab mdui-ripple mdui-color-theme-accent">
            <i class="mdui-icon material-icons">add</i>
            <i class="mdui-icon mdui-fab-opened material-icons">clear</i>
        </button>
        <div class="mdui-fab-dial">
            <button class="mdui-fab mdui-fab-mini mdui-ripple mdui-color-orange" mdui-dialog="{target: '#addDialog'}">
                <i class="mdui-icon material-icons">add</i>
            </button>
            <button class="mdui-fab mdui-fab-mini mdui-ripple mdui-color-blue">
                <i class="mdui-icon material-icons">edit</i>
            </button>
        </div>
    </div>

    <div id="vm">
        <div class="mdui-dialog" id="addDialog">
            <div class="mdui-dialog-content">
                <div class="mdui-dialog-title">🔖添加书签</div>
                <div class="mdui-textfield mdui-textfield-floating-label">
                    <label class="mdui-textfield-label">Title</label>
                    <input class="mdui-textfield-input" type="text" v-model="addData.title" />
                </div>
                <div class="mdui-textfield mdui-textfield-floating-label">
                    <label class="mdui-textfield-label">URL</label>
                    <input class="mdui-textfield-input" type="url" v-model="addData.url" />
                </div>
                <div class="mdui-textfield mdui-textfield-floating-label">
                    <label class="mdui-textfield-label">ICON</label>
                    <input class="mdui-textfield-input" type="text" v-model="addData.icon" />
                </div>
                <div class="mdui-textfield mdui-textfield-floating-label">
                    <label class="mdui-textfield-label">Group</label>
                    <input class="mdui-textfield-input" type="text" v-model="addData.group" />
                </div>
            </div>
            <div class="mdui-divider"></div>
            <div class="mdui-dialog-actions">
                <button class="mdui-btn mdui-ripple mdui-color-theme-accent" mdui-dialog-close>取消</button>
                <button class="mdui-btn mdui-ripple mdui-color-theme-accent" @click="addMarkbook"
                    mdui-dialog-close>确认</button>
            </div>
        </div>

        <div class="mdui-dialog" id="editDialog">
            <div class="mdui-dialog-content">
                <div class="mdui-dialog-title">修改书签</div>
                <div class="mdui-textfield">
                    <label class="mdui-textfield-label">Title</label>
                    <input class="mdui-textfield-input" type="text" v-model="editData.title" />
                </div>
                <div class="mdui-textfield">
                    <label class="mdui-textfield-label">URL</label>
                    <input class="mdui-textfield-input" type="url" v-model="editData.url" />
                </div>
                <div class="mdui-textfield">
                    <label class="mdui-textfield-label">ICON</label>
                    <input class="mdui-textfield-input" type="text" v-model="editData.icon" />
                </div>
                <div class="mdui-textfield">
                    <label class="mdui-textfield-label">Group</label>
                    <input class="mdui-textfield-input" type="text" v-model="editData.group" />
                </div>
            </div>
            <div class="mdui-divider"></div>
            <div class="mdui-dialog-actions">
                <button class="mdui-btn mdui-ripple mdui-color-theme-a700" mdui-dialog-close
                    @click="delMarkbook(editData.id)">删除</button>
                <button class="mdui-btn mdui-ripple mdui-color-theme-accent" mdui-dialog-close>取消</button>
                <button class="mdui-btn mdui-ripple mdui-color-theme-accent" mdui-dialog-close
                    @click="upMarkbook">确认</button>
            </div>
        </div>


        <div class="mdui-appbar">
            <div class="mdui-tab mdui-tab-centered mdui-color-theme">
                <a :href="`#tab${index}`" class="mdui-ripple" v-for="(item, index) in group">{{item.group}}</a>
            </div>
        </div>
        <div :id="`tab${index}`" class="mdui-p-a-2" v-for="(item, index) in group">
            <div class="mdui-row-xs-3 mdui-row-sm-5 mdui-center" style="max-width: 1200px;">

                <div class="mdui-col mdui-p-b-3" v-for="item2 in resMarkdate(item.group)" :key="item2.id">
                    <div class="mdui-center" style="width: 80px;cursor:pointer;" @click="openUrl(item2.url)"
                        @contextmenu="openEditDialog($event, item2)">
                        <img class="mdui-img-circle mdui-hoverable" :src="item2.icon" width="80px" height="80px">
                        <div class="mdui-typo-body-1 mdui-text-center mdui-m-t-1">{{item2.title}}</div>
                    </div>
                </div>

            </div>
        </div>
    </div>

    <!-- MDUI JavaScript -->
    <script src="https://unpkg.com/mdui@1.0.2/dist/js/mdui.min.js"></script>
    <!-- VueJS -->
    <script src="js/vue.js"></script>
    <script>
        let inst_tab, inst_dialog
        let vm = new Vue({
            el: '#vm',
            data: {
                group: [],
                markData: [],
                editData: [],
                addData: []
            }
            , created: () => {
                fetch('/api/group').then(value => value.json())
                    .then(value => vm.group = value)
            }
            , updated: function () {
                this.$nextTick(() => {
                    if (!inst_tab) { inst_tab = new mdui.Tab('.mdui-tab') }
                    inst_tab.handleUpdate()
                })
            }
            , methods: {
                resMarkdate: function (group) {
                    if (!vm.markData[group]) {
                        fetch(`/api/data?group=${group}`)
                            .then(value => value.json())
                            .then(value => {
                                vm.$set(vm.markData, group, value)
                            })
                    }
                    return vm.markData[group]
                }
                , openUrl: (url) => {
                    console.log(url)
                }
                , openEditDialog: (e, i) => {
                    e.preventDefault()
                    vm.editData = i
                    if (!inst_dialog) { inst_dialog = new mdui.Dialog('#editDialog') }
                    inst_dialog.open()
                }
                , addMarkbook: () => {
                    fetch(`/api/insert?title=${vm.addData.title}&url=${vm.addData.url}&icon=${vm.addData.icon}&group=${vm.addData.group}`)
                        .then(value => value.json())
                        .then(value => {
                            vm.markData = []
                            vm.resMarkdate(vm.addData.group)
                            vm.addData = []
                            mdui.snackbar({
                                message: value.status
                            })
                        })
                }
                , delMarkbook: (id) => {
                    fetch(`/api/delete?id=${id}`).then(value => value.json())
                        .then(value => {
                            vm.markData = []
                            vm.resMarkdate(vm.editData.group)
                            mdui.snackbar({
                                message: value.status
                            })
                        })
                }
                , upMarkbook: () => {
                    fetch(`/api/update?id=${vm.editData.id}&title=${vm.editData.title}&url=${vm.editData.url}&icon=${vm.editData.icon}&group=${vm.editData.group}`)
                        .then(value => value.json())
                        .then(value => {
                            vm.markData = []
                            vm.resMarkdate(vm.editData.group)
                            mdui.snackbar({
                                message: value.status
                            })
                        })
                }
            }
        })
    </script>
</body>

</html>